/*
 * @Date: 2024-11-22 17:27:41
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-06 11:33:09
 * @Description: 
 */
import { defineComponent, h, watch, reactive, ref, onBeforeUnmount, onBeforeMount } from "vue";
import "element-plus/es/components/select/style/css";
import { ElSelect, ElOption } from "element-plus";
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '@/stores/tagsViewRoutes';

const { tagsViewRoutes } = storeToRefs(useTagsViewRoutes());
const toolsState = reactive({
  selOptions: []
})

export default defineComponent({
  emits: ["update:modelValue"],
  setup(_, { emit, attrs }) {
    function handleUpdate(e = null) {
      emit("update:modelValue", e);
    }
    function loadToolOptions() {
      if (toolsState.selOptions.length > 0) {
        return;
      } else {
        console.log('loadToolOptions', toolsState.selOptions);
        for (let v of tagsViewRoutes.value) {
          if (v.meta?.isHide) continue;
          if (v.children && v.children.length > 0) continue;
          toolsState.selOptions.push({
            label: v.meta.title, value: v.path
          });
        }
      }
    }
    function clearToolOptions() {
      toolsState.selOptions = []
    }
    
    onBeforeMount(() => {
      loadToolOptions()
    })
    onBeforeUnmount(() => {
      clearToolOptions()
    })
    return () => {
      const props = {
        ...attrs,
        key: String(attrs.multiple),
        "onUpdate:modelValue": handleUpdate,
      }
      return h(ElSelect, props, {
        default: () => [
          toolsState.selOptions?.map((option) => {
            return h(ElOption, { label: option.label, value: option.value })
          })
        ]
      })
    }
  }
})
